<template>
  <q-dialog class="look-img-dialog" v-model="show">
    <div class="kuang full-height full-width relative-position">
      <template v-if="isList">
        <swiper :options="swiperOption" class="full-height full-width" style="height: inherit">
          <swiper-slide  class="full-height flex items-center justify-center" v-for="(item,index) in imgList" :key="index">
            <img class="look-img" :src="item" alt="">
          </swiper-slide>
          <div class="swiper-button-prev" slot="button-prev">
            <q-btn round color="primary" size="13px" icon="chevron_left" style="margin: 0" />
          </div>
          <div class="swiper-button-next" slot="button-next">
            <q-btn round color="primary" size="13px" icon="chevron_right" style="margin: 0" />
          </div>
        </swiper>
        <q-btn flat round color="white" class="iconfont icontubiao-67 close-btn absolute" @click="hideDialog" />
        <div class="swiper-pagination" style="width: auto"></div>
      </template>
      <template v-else>
        <img class="look-img" :src="link" alt="">
        <q-btn flat round color="white" class="iconfont icontubiao-67 close-btn absolute" @click="hideDialog" />
      </template>
      <q-inner-loading :showing="loading" class="pdf-content">
        <q-spinner-gears size="50px" color="primary" />
      </q-inner-loading>
    </div>
  </q-dialog>
</template>

<script>
import { getOSSAccount } from 'src/boot/program/cloud'
import { loadOss, saveOss } from 'src/assets/js/storage'
import { getBasisUrl } from 'src/boot/template/template-upload'
import _ from 'lodash'

// let OSS = require('ali-oss')
export default {
  name: 'look-img',
  data () {
    return {
      show: false,
      link: '', // 可用的连接
      client: null, // 文件传输用
      loading: false,
      imgList: [],
      isList: false,
      serverLink: '', // 服务器地址
      swiperOption: {
        loop: true,
        keyboard: true,
        grabCursor: true,
        initialSlide: 0,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  },
  created () {
    this.getServerLink()
  },
  methods: {
    // 显示弹框
    showDialog (link, index) {
      this.initInfo(link, index)
      // this.link = link
      this.show = true
    },
    // 隐藏弹框
    hideDialog () {
      this.show = false
    },
    getServerLink () {
      getBasisUrl().then(res => {
        this.serverLink = res.data
      })
    },
    initInfo (link, index) {
      this.isList = (typeof link) === 'object'
      this.loading = true
      if ((typeof link) === 'object' && link.length > 1) {
        this.isList = true
        this.swiperOption.initialSlide = index
        link.forEach(item => {
          item = _.startsWith(item, 'blob') || _.startsWith(item, 'http') ? item : this.serverLink + item
        })
        this.imgList = link
      } else {
        this.isList = false
        link = (typeof link) === 'object' && link.length === 1 ? link[0] : link
        console.log(_.startsWith(link, 'blob'), _.startsWith(link, 'http'), link)
        this.link = _.startsWith(link, 'blob') || _.startsWith(link, 'http') ? link : this.serverLink + link
      }
      this.loading = false
    },
    // initInfo (link) {
    //   this.loading = true
    //   this.getOss((oss) => {
    //     this.client = new OSS({
    //       region: oss.region,
    //       accessKeyId: oss.accessKeyId,
    //       accessKeySecret: oss.accessKeySecret,
    //       stsToken: oss.securityToken,
    //       bucket: oss.bucket
    //     })
    //     this.link = this.client.signatureUrl(link, { expires: 600 })
    //     this.loading = false
    //   })
    // },
    // 获取oss账号
    getOss (func) {
      let oss = loadOss()
      if (!oss && !oss.expiration) {
        this.refreshOSSAcout(func)
      } else {
        let overTime = new Date(oss.expiration)
        let now = new Date()
        if (now.getTime() < overTime.getTime() - 60) {
          func(oss)
        } else {
          this.refreshOSSAcout(func)
        }
      }
    },
    // 更新oss账号
    refreshOSSAcout (func) {
      getOSSAccount().then(res => {
        let oss = res.data
        saveOss(oss)
        func(oss)
      })
    }
  }
}
</script>

<style scoped lang="stylus">
  .kuang{
    display flex
    justify-content center
    align-items center
    max-width 100%
    max-height 100%
  }
  .look-img{
    max-height 100%
    max-width 100%
  }
  >>>.swiper-pagination{
    bottom 20px
    span{
      margin 0 10px
      display inline-block
      width 12px
      height 12px
      &:focus{
        outline none
      }
    }
  }
  .swiper-button-prev, .swiper-button-next {
    background-image none
    width 39px
    height 39px
  }
  .close-btn{
    color #ffffff
    z-index 99
    font-size 24px
    top 50px
    right 0
  }
</style>
